<template>
  <div>
    <el-row>
      <el-col :span="8">
        <span>设备串口</span>
      </el-col>
      <el-col :span="16">
        <el-select v-model="params['device']" placeholder="请选择">
          <el-option v-for="item in devices" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <span>波特率</span>
      </el-col>
      <el-col :span="16">
        <el-select v-model="params['baudRate']" placeholder="请选择">
          <el-option v-for="item in [115200, 38400, 9600]" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <span>数据位</span>
      </el-col>
      <el-col :span="16">
        <el-select v-model="params['databits']" placeholder="请选择">
          <el-option v-for="item in [8, 7, 6, 5]" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <span>奇偶位</span>
      </el-col>
      <el-col :span="16">
        <el-select v-model="params['parity']" placeholder="请选择">
          <el-option
            v-for="item in ['None', 'Even', 'Odd']"
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <span>停止位</span>
      </el-col>
      <el-col :span="16">
        <el-select v-model="params['stopbits']" placeholder="请选择">
          <el-option v-for="item in [1, 2]" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8"><div class="grid-content"></div></el-col>
      <el-col :span="16"><div class="grid-content"><el-button @click="openSerial">打开串口</el-button></div></el-col>
    </el-row>
  </div>
</template>

<script>
const { ipcRenderer } = require("electron");
const SerialPort = require("serialport");

export default {
  data() {
    return {
      devices: [],
      params: {
        device: "/dev/ttyUSB0",
        baudRate: 115200,
        databits: 8,
        parity: "None",
        stopbits: 1,
      },
    };
  },
  created() {
    SerialPort.list().then(
      (ports) => ports.forEach( port => 
        this.devices.push(port.path)),
      (err) => console.error(err)
    );
  },
  methods: {
    openSerial() {
      ipcRenderer.send("open-serial", this.params);
    },
  },
};
</script>

<style>
.grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
</style>